<template>
	<view class="content">

		<!-- 轮播图 -->
		<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper circular autoplay="true" interval="2000" duration="500" class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass">
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 轮播图 -->

		<!-- 菜单 -->
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view @click="onGridClick(item.id)" class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*3">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 菜单 -->

	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				//轮播图
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},

				//菜单
				cuIconList: [{
						cuIcon: 'commandfill',
						color: 'red',
						badge: 0,
						name: '远程开门',
						id: 'remote-door'
					}, {
						cuIcon: 'myfill',
						color: 'orange',
						badge: 0,
						name: '访客开门',
						id: 'visitor'
					}, {
						cuIcon: 'qr_code',
						color: 'purple',
						badge: 0,
						name: '自助登记',
						id: 'visitorrs'
					}, {
						cuIcon: 'formfill',
						color: 'yellow',
						badge: 0,
						name: '开门记录',
						id: 'remote-door-record'
					}, {
						cuIcon: 'clothesfill',
						color: 'green',
						badge: 0,
						name: '我的设备',
						id: 'devicelist'
					},
					{
						cuIcon: 'friendaddfill',
						color: 'blue',
						badge: 0,
						name: '添加员工',
						id: 'adddemployee'
					},
					{
						cuIcon: 'group_fill',
						color: 'purple',
						badge: 0,
						name: '员工信息',
						id: 'employeelist'
					},
					{
						cuIcon: 'recordfill',
						color: 'cyan',
						badge: 0,
						name: '原始记录',
						id: 'original-record'
					},
					{
						cuIcon: 'rankfill',
						color: 'mauve',
						badge: 0,
						name: '组织架构',
						id: 'department'
					},
					{
						cuIcon: 'forwardfill',
						color: 'red',
						badge: 0,
						name: '注销',
						id: 'logout'
					}
				],
				gridCol: 3,
				gridBorder: false,
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			onGridClick(id) {
				// console.log(id)
				switch (id) {
					case 'adddemployee':
						uni.navigateTo({
							url: 'employee/addemployee'
						})
						break;
					case 'devicelist':
						uni.navigateTo({
							url: '../device/devicelist'
						})
						break;
					case 'employeelist':
						uni.navigateTo({
							url: 'employee/employeelist'
						})
						break;
					case 'remote-door':
						uni.navigateTo({
							url: 'remote-door/remote-door'
						})
						break;
					case 'remote-door-record':
						uni.navigateTo({
							url: 'remote-door-record/remote-door-record'
						})
						break;
					case 'visitor':
						uni.navigateTo({
							url: 'visitor/visitor'
						})
						break;
					case 'visitorrs':
							uni.navigateTo({
								url: 'visitor/visitorrs'
							})
							break;
					case 'original-record':
						uni.navigateTo({
							url: 'original-record/original-record'
						})
						break;
					case 'department':
						uni.navigateTo({
							url: 'department/department'
						})
						break
					case 'logout':
						uni.showModal({
							title: '提示',
							content: '确定要注销登陆吗?',
							success: (res) => {
								if (res.confirm) {
									uni.reLaunch({
										url: '../login/login'
									})
								}
							}
						})
						break
					default:
						uni.showToast({
							title: '敬请期待...',
							icon: 'none'
						})
						break;
				}
			}
		}
	}
</script>

<style>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
	}

	.image {
		width: 750rpx;
	}
</style>
